<template>
	<div id="home">
		<el-container style="height: 100%;">
		  	<el-aside width="20%">
		  		<!--左侧导航栏-->
		  		<el-menu
			      	default-active="2"
			      	class="el-menu-vertical-demo"
			      	@open="handleOpen"
			      	@close="handleClose">
			      	<el-submenu index="1">
			        	<template slot="title">
			          	<i class="el-icon-location"></i>
			          	<span>导航一</span>
			        </template>
			        <el-menu-item-group>
			          	<template slot="title">分组一</template>
			          	<el-menu-item index="1-1">选项1</el-menu-item>
			          	<el-menu-item index="1-2">选项2</el-menu-item>
			        </el-menu-item-group>
			        <el-menu-item-group title="分组2">
			          	<el-menu-item index="1-3">选项3</el-menu-item>
			        </el-menu-item-group>
			        <el-submenu index="1-4">
			          	<template slot="title">选项4</template>
			          	<el-menu-item index="1-4-1">选项1</el-menu-item>
			        </el-submenu>
			      	</el-submenu>
			      	<el-menu-item index="2">
			        	<i class="el-icon-menu"></i>
			        	<span slot="title">导航二</span>
			      	</el-menu-item>
			      	<el-menu-item index="3">
			        	<i class="el-icon-setting"></i>
			        	<span slot="title" >导航三</span>
			      	</el-menu-item>
			    </el-menu>

		  	</el-aside>
		  	<el-container>
		    	<el-header>欢迎您，管理员刘树奇</el-header>
		    	<el-main>
		    		<!--主体表格部分-->
		    		<el-table
					    :data="tableData5"
					    ref="multipleTable"
					    tooltip-effect="dark"
					    @selection-change="handleSelectionChange"
					    highlight-current-row
    					@row-click="handleCurrentChange"
					    style="width: 100%">
					    <el-table-column type="expand">
					      	<template slot-scope="props">
					        	<el-form label-position="left" inline class="demo-table-expand">
					          		<el-form-item label="用户昵称">
							            <span>{{ props.row.name }}</span>
							        </el-form-item>
							        <el-form-item label="用户生日">
							            <span>{{ props.row.shop }}</span>
							        </el-form-item>
							        <el-form-item label="用户 ID">
							            <span>{{ props.row.id }}</span>
							        </el-form-item>
							        <el-form-item label="个性签名">
							            <span>{{ props.row.shopId }}</span>
							        </el-form-item>
							        <el-form-item label="用户邮箱">
							            <span>{{ props.row.category }}</span>
							        </el-form-item>
							        <el-form-item label="用户手机号">
							            <span>{{ props.row.address }}</span>
							        </el-form-item>
							        <el-form-item label="用户兴趣爱好">
							            <span>{{ props.row.desc }}</span>
					          		</el-form-item>
					        	</el-form>
					      	</template>
					    </el-table-column>
					    <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <el-table-column
					      label="用户 ID"
					      prop="id">
					    </el-table-column>
					    <el-table-column
					      label="姓名"
					      width="180">
					      	<template slot-scope="scope">
					        	<el-popover trigger="hover" placement="top">
					          		<p>姓名: {{ scope.row.name }}</p>
						          	<p>住址: {{ scope.row.address }}</p>
						          	<div slot="reference" class="name-wrapper">
						            	<el-tag size="medium">{{ scope.row.name }}</el-tag>
						          	</div>
					        	</el-popover>
					      	</template>
					    </el-table-column>
					    <el-table-column
					      prop="tag"
					      label="用户性别"
					      width="100"
					      :filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }]"
					      :filter-method="filterTag"
					      filter-placement="bottom-end">
					      <template slot-scope="scope">
					        <el-tag
					          :type="scope.row.tag === '男' ? 'primary' : 'success'"
					          close-transition>{{scope.row.tag}}</el-tag>
					      </template>
					    </el-table-column>
					    <el-table-column
					      prop="amount1"
					      sortable
					      label="点赞数">
					    </el-table-column>
					    <el-table-column label="操作">
					      	<template slot-scope="scope">
						        <el-button
						          size="mini"
						          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						        <el-button
						          size="mini"
						          type="danger"
						          @click="handleDelete(scope.$index, tableData5)">删除</el-button>
					      	</template>
					    </el-table-column>
					</el-table>
					<div style="margin-top: 20px">
					    <el-button type="warning" @click="toggleSelection" :disabled="this.multipleSelection.length === 0">批量删除</el-button>
					    <el-button @click="clearSelection">取消选择</el-button>
				  	</div>
		    	</el-main>
		    	<el-footer>
		    		<div class="block">
					  	<el-pagination
					    	layout="prev, pager, next"
					    	:total="50">
					  	</el-pagination>
					</div>
		    	</el-footer>
		  	</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
	    data() {
	      	return {
	        	isCollapse: true,
	        	tableData5: [{
	        		index:'0',
		          	id: '流量1',
		          	name: '刘树奇',
		          	category: '江浙小吃、小吃零食',
		          	desc: '上海市',
		          	address: '上海市普陀区真北路',
		          	shop: '王小虎夫妻店',
		          	shopId: '10333',
		          	tag: '男',
		          	amount1: '234'
		        }, {
		        	index:'1',
		          	id: '流量2',
		          	name: '章海平',
		          	category: '江浙小吃、小吃零食',
		          	desc: '上海市',
		          	address: '上海市普陀区真北路',
		          	shop: '王小虎夫妻店',
		          	shopId: '10333',
		          	tag: '女',
		          	amount1: '165'
		        }, {
		        	index:'2',
		          	id: '流量3',
		          	name: '章海平',
		          	category: '江浙小吃、小吃零食',
		          	desc: '上海市',
		          	address: '上海市普陀区真北路',
		          	shop: '王小虎夫妻店',
		          	shopId: '10333',
		          	tag: '男',
		          	amount1: '324'
		        }, {
		        	index:'3',
		          	id: '流量4',
		          	name: '章海平',
		          	category: '江浙小吃、小吃零食',
		          	desc: '上海市',
		          	address: '上海市普陀区真北路',
		          	shop: '王小虎夫妻店',
		          	shopId: '10333',
		          	tag: '女',
		          	amount1: '621'
		        }],
		        multipleSelection: [],
		        currentRow: null,
	      	};
	    },
	    mounted(){

	    },
	    methods: {
		    handleOpen(key, keyPath) {
//		        console.log(key, keyPath);
	      	},
	      	handleClose(key, keyPath) {
//		        console.log(key, keyPath);
	      	},
	      	//点击编辑
	      	handleEdit(index, row) {
//		        console.log(index, row);
		    },
		    //点击删除
		    handleDelete(index, row) {
//		        console.log(index, row);
		        row.splice(index, 1);
		    },
		    //以下三个函数是点击用户性别筛选相关
		    formatter(row, column) {
		        return row.address;
		    },
		    filterTag(value, row) {
		        return row.tag === value;
		    },
		    filterHandler(value, row, column) {
		        const property = column['property'];
		        return row[property] === value;
		    },
		    //下面两个是点击selete按钮
		    toggleSelection(rows) {
	        	var ids = this.multipleSelection.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
	        	console.log(ids)
//	        	this.tableData5.splice(ids, 1);
	        	//判断在tableData5中删除当前选中的需要删除的数组
          		this.multipleSelection.forEach((row,index) => {
//		          		if(this.tableData5[indexbox] == this.multipleSelection[index]){
//						console.log(index)
//		          		}
//			            this.$refs.multipleTable.toggleRowSelection(row);
				});
		    },
		    clearSelection(){
		    	this.$refs.multipleTable.clearSelection();
		    },
		    handleSelectionChange(val) {
		       	this.multipleSelection = val;
		    },
			//点击选择整个行
			handleCurrentChange(val) {
//		        this.currentRow = val;
		        this.$refs.multipleTable.toggleRowSelection(val)
		    }
	    },
	    beforeRouteEnter(to,from,next){
	    	if(true){
	    		next()
	    	}else{
	    		alert("请先登录")
	    		next({
				    path: '/login',
				    query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
				})
	    	}
	    }
  	}


</script>

<style lang="less" scoped>
	@w:100%;
	.flex(){
	    display: -webkit-flex;
	    justify-content: center;
	    align-items: center;
	}
	.size(){
	    width: @w;
	    height: @w;
	}

	#home{
		height: 100%;
	}




	/*布局容器*/
	.el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    .flex();
  	}
  	.el-footer {
	    background-color: #fff;
  	}
	.el-aside {
	    background-color: #D3DCE6;
	    color: #333;
	    /*text-align: center;*/
	    line-height: 200px;
	}
	.el-main {
	    /*background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;*/
	}
	body > .el-container {
	    margin-bottom: 40px;
	}
	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
	    line-height: 260px;
	}
	.el-container:nth-child(7) .el-aside {
	    line-height: 320px;
	}
	/*导航菜单*/
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: @w;
	    /*min-height: @w;*/
	}
	/*table表格*/
	.demo-table-expand {
	    font-size: 0;
	  }
	.demo-table-expand label {
	    width: 90px;
	    color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 50%;

	}
</style>
<style type="text/css">

</style>
